<template>
    <div class="marginTop70 colorFFF">
        <div class="size20 sizeCenter" style="padding-top: 20px;">我的粉丝{{ total }}</div>
        <el-row :gutter="50" @scroll="loadMoreData" v-if="data.length > 0">
            <el-col :key="index" :span="8" v-for="(item, index) in data">
                <div class="boxs radius10 colorFFF marginTop10 padding20" style="width: 100%;background-color: aquamarine;">
                    <div class="flexSB">
                        <div class="flexFS hand" style="width: 80%;"  @click.stop="toPath('/user-homepage?user_id=' + item.user_info.id)">
                            <el-avatar :size="55" :src="item.user_info.avatar"></el-avatar>
                            <div class="color333" style="width: 200px;margin-left:10px">
                                <div class="size16 flexFS colorFFF">
                                    {{ item.user_info.name }}
                                    <!-- <img alt src="@/assets/image/vip-icon.png" srcset style="width: 50px;margin-left:10px"
                                    v-if="item.is_vip" />-->
                                </div>
                                <div class="colorFFF flexFS" style="margin-top:5px;width: 400px;">
                                    <span class="vertical-middle">
                                        <span>ID</span>
                                        <span class="pl-4">{{ item.user_info.id }}</span>
                                    </span>
                                    <span class="marginLeft20">
                                        <span>粉丝</span>
                                        <span class="pl-4">{{ item.user_info.fans_count }}</span>
                                    </span>
                                    <span class="marginLeft20">
                                        <span>作品</span>
                                        <span class="pl-4">{{ parseInt(item.user_info.creation_count) + parseInt(item.user_info.long_count)}}</span>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="flexFS colorfff size14">
                            <el-button @click="attentionFun(item.user_info.id,item)" class="interest" round v-if="item.each == 0">回关</el-button>
                            <el-button @click="cancelAttentionFun(item.user_info.id,item)" class="followed hand" round style="line-height: 1;" v-else>已关注</el-button>
                        </div>
                    </div>

                    <div class="text-line2 height-44 mt-20" style="margin-left: 64px;">
                        <el-tooltip :content="item.user_info.subtitle" class="item" effect="dark" placement="top">
                            <span style="color: rgba(255,255,255,0.9);" v-if="item.user_info.subtitle">{{ item.user_info.subtitle }}</span>
                            <span style="color: rgba(255,255,255,0.2);" v-else>他(她)貌似有点高冷哦</span>
                        </el-tooltip>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div v-else>
            <el-empty></el-empty>
        </div>
    </div>
</template>
<script>
import pageTool from '@/mixins/page'
import recommendVideo from '@/components/recommend-video/index'
export default {
    mixins: [pageTool],
    components: {
        recommendVideo,
    },
    data() {
        return {
            query: {},
            submitComplete: false,
        }
    },
    mounted() {
        this.beforeInit()
        document.title = '陪秀-我的粉丝'
    },
    methods: {
        beforeInit() {
            this.url = '/user-attention/fans_list'
            this.append = true
            this.init() //重新请求数据
        },
        loadMoreData() {
            console.log('我执行了')
            this.page++
            this.init()
        },
        toPath(url) {
            window.open(url, '_blank')
        },

        attentionFun(id, item) {
            item.each = 1
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            console.log(id)
            this.$request
                .post('/user-attention/create/' + id)
                .then((res) => {
                    this.submitComplete = false
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        //取消关注
        cancelAttentionFun(id, item) {
            item.each = 0
            if (this.submitComplete) return
            this.submitComplete = true
            this.$request
                .del('/user-attention/cancel/' + id)
                .then((res) => {
                    this.submitComplete = false
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
    },
}
</script>
  
<style lang="scss" scoped>
.boxCol::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}

.boxs {
    background-image: radial-gradient(#2d284b, #151225);
    opacity: 1;
    // filter: blur(100px);
}

.interest {
    background-color: #ff1c6d;
    color: #ffffff;
    width: 5.2vw;
    border-radius: 50px;
    font-size: 0.8vw;
    border: none;
    padding: 0.5vw 0.5vw;
}

.followed {
    background-color: #272337;
    color: #ffffff;
    width: 5.2vw;
    border-radius: 50px;
    font-size: 0.8vw;
    border: none;
    padding: 0.5vw 0.5vw;
}
</style>